<template>
    <div class="i-table-no-border">
        <Table highlight-row ref="table" :columns="columns" :data="dataWithPage" :loading="loading" size="small">
            <template slot-scope="{ row }" slot="info">
                <a @click="handleDetailPatient(row)">{{ row.basic }}</a>
            </template>
            <template slot-scope="{ row }" slot="state">
                <Tag v-if="row.state === 0" color="blue">失效</Tag>
                <Tag v-if="row.state === 1" color="volcano">跟进中</Tag>
                <Tag v-if="row.state === 2" color="cyan">预约</Tag>
                <Tag v-if="row.state === 3" color="green">到诊</Tag>
                <Tag v-if="row.state === 4" color="orange">已到老患者</Tag>
            </template>
            <template slot-scope="{ row }" slot="label">
                <Tag v-if="row.label === 0">在乎费用</Tag>
                <Tag v-if="row.label === 1">专家</Tag>
                <Tag v-if="row.label === 2">敏感</Tag>
                <Tag v-if="row.label === 3">远程</Tag>
            </template>
            <template slot-scope="{ row }" slot="channel">
                <Badge v-if="row.channel === 0" status="success" text="微信" />
                <Badge v-if="row.channel === 1" status="processing" text="抖音" />
                <Badge v-if="row.channel === 2" status="error" text="市场转诊" />
                <Badge v-if="row.channel === 3" status="warning" text="自然到诊" />
            </template>
        </Table>
        <div class="ivu-mt iuv-text-center" slot="footer">
            <Page :total="limitData.length" :current.sync="current" show-elevator show-sizer show-total></Page>
        </div>
        <patient-detail ref="patientDetail"/>
        <edit-patient ref="editPatient" v-if="!loading"/>
        <return-visit ref="returnVisit" />
    </div>
</template>
<script>
import random from '@/libs/random_str'
import patientDetail from '@/components/patientDetail'
import editPatient from '@/components/editPatient'
import returnVisit from '@/components/returnVisit'
export default {
    components: { patientDetail, editPatient, returnVisit },
    data() {
        return {
            loading: false,
            modal: false,
            list: [],
            current: 1,
            size: 10,
            showCreate: false,
            creating: true,
            formData: {
                personnel: [],
                Occupation: '',
                Effect: '',
                risk: '',
                Diagnosis: ''
            },
            columns: [
                {
                    type: 'selection',
                    fixed: 'left',
                    width: 50
                },

                {
                    title: '基本信息',
                    key: 'basic',
                    slot: 'info',
                    minWidth: 150,
                    fixed: 'left'
                },
                // {
                //     title: '微信号',
                //     key: 'wx',
                //     minWidth: 108
                // },
                {
                    title: '未到天数',
                    sortable: 'custom',
                    key: 'daysNot',
                    minWidth: 108
                },
                {
                    title: '患者状态',
                    key: 'state',
                    slot: 'state',
                    minWidth: 100
                },
                {
                    title: '上次归属人',
                    key: 'preBelonger',
                    minWidth: 108
                },
                {
                    title: '未访天数',
                    sortable: 'custom',
                    key: 'daysNotVisited',
                    minWidth: 108
                },
                {
                    title: '导入时间',
                    key: 'impotTime',
                    sortable: 'custom',
                    minWidth: 118
                },
                // {
                //     title: '上次回访时间',
                //     key: 'preTime',
                //     sortable: 'custom',
                //     minWidth: 135
                // },
                {
                    title: '上次回访人',
                    key: 'prePerson',
                    minWidth: 108
                },
                {
                    title: '回访次数',
                    key: 'numberVisits',
                    sortable: 'custom',
                    minWidth: 108
                },
                {
                    title: '患者标签',
                    key: 'label',
                    slot: 'label',
                    minWidth: 138
                },
                {
                    title: '城市',
                    key: 'city',
                    minWidth: 100
                },
                {
                    title: '病种',
                    key: 'disease',
                    minWidth: 200
                },
                {
                    title: '来源',
                    minWidth: 120,
                    slot: 'channel'
                },
                {
                    title: '备注/回访',
                    minWidth: 150,
                    key: 'remarks'
                }
                // {
                //     title: '操作',
                //     minWidth: 118,
                //     slot: 'action',
                //     fixed: 'right'
                // }
            ]
        }
    },
    computed: {
        limitData() {
            let data = [...this.list]
            return data
        },
        dataWithPage() {
            const data = this.limitData
            const start = this.current * this.size - this.size
            const end = start + this.size
            return [...data].slice(start, end)
        }
    },
    methods: {
        mockOneData() {
            const item = {}
            item.basic =
                '刘志强 男' + ' ' + Math.floor(Math.random() * 60 + 15) + '岁'
            item.wx = random(8)
            item.daysNot = Math.floor(Math.random() * 125 + 90)
            item.state = Math.floor(Math.random() * 5)
            item.preBelonger = '高玲'
            item.daysNotVisited = Math.floor(Math.random() * 100)
            item.impotTime = '2020-05-21'
            item.preTime = '2020-05-18 16:03'
            item.prePerson = '王艳'
            item.preArrival = '2020-05-21'
            item.channel = Math.floor(Math.random() * 4)
            item.state = Math.floor(Math.random() * 4)
            item.numberVisits = Math.floor(Math.random() * 100)
            item.disease = '白癜风'
            item.dialogue = Math.floor(Math.random() * 3)
            item.city = '上海'
            item.label = Math.floor(Math.random() * 4)
            item.foundTime = '2020-05-01 16:03'
            item.remarks = '备注内容'
            item.operation = Math.floor(Math.random() * 2)
            return item
        },
        getData() {
            this.current = 1
            this.loading = true
            setTimeout(() => {
                let data = []
                for (let i = 0; i < 100; i++) {
                    data.push(this.mockOneData())
                }
                this.list = data
                this.loading = false
            }, 1000)
        },
        handleOpenDrawer() {
            this.$refs.editPatient.handleEdit()
        },
        handleDetailPatient(row) {
            this.$refs.patientDetail.handleOpen()
        },
        handleReturnVisit() {
            this.$refs.returnVisit.handleReturnVisit()
        }
    },
    mounted() {
        this.getData()
    }
}
</script>
